<template>
	<view class="page">
		<view class='bg-grey'>
			<view class="title">
				<view>
					<text>销售订单：</text>
					{{vbeln==null?'':vbeln}}
				</view>
				<view>
					<text>客户：</text>
					{{kunnrName==null?'':kunnrName}}
				</view>
			</view>
			<view class="title">
				<view>
					<text>税码：</text>
					{{mwskz==null?'':mwskz}}
				</view>
				<view>
					<text>商标：</text>
					{{brand==null?'':brand}}
				</view>
			</view>
			
			<view class="conf-list">
				<view class="conf-list-item" v-for="(item,index) in salesItem" :key="index">
					<view class="conf-list-card">
						<view class="conf-list-content">
							<view>
								<text>物料名称：</text>
								<text>{{item.maktx==null?'':item.maktx}}</text>
							</view>
						</view>
						<view class="conf-list-content">
							<text>数量：</text>
							<text>{{item.kwmeng==null?'':item.kwmeng}}</text>
						</view>
						<view class="conf-list-content">
							<view>
								<text>金额：</text>
								<text>{{item.brtwr==null?'':item.brtwr}}</text>
							</view>
						</view>
						<view class="conf-list-content">
							<text>交货日期：</text>
							<text>{{item.edatu==null?'':item.edatu}}</text>
						</view>
						<view class="conf-list-content">
							<text>客户单号：</text>
							<text>{{item.bstnk==null?'':item.bstnk}}</text>
						</view>
						
						<view class="conf-list-content">
							<text>颜色：</text>
							<text>{{item.colorGroup==null?'':item.colorGroup}}</text>
						</view>
						
						<view class="conf-list-content">
							<text>物性：</text>
							<text>{{wxDescription==null?'':wxDescription}}</text>
						</view>
						
						<view class="conf-list-content">
							<text>工艺：</text>
							<text>{{routingDescription==null?'':routingDescription}}</text>
						</view>
						
						<view class="uni-container">
							<uni-table ref="table" :loading="loading" border stripe  emptyText="暂无更多数据" >
								<uni-tr>
									<uni-th width="70" align="center">尺码</uni-th>
									<uni-th width="70" align="center">数量</uni-th>
									<uni-th width="75" align="center">单价</uni-th>
									<uni-th width="75" align="center">金额</uni-th>
									<uni-th width="80" align="center">预补数</uni-th>
								</uni-tr>
								<uni-tr v-for="(a, b) in item.sizeItem" :key="a">
									<uni-td align="center">{{ a.size }}</uni-td>
									<uni-td align="center">{{ a.kwmeng }}</uni-td>
									<uni-td align="center">{{ a.brtpr }}</uni-td>
									<uni-td align="center">{{ a.brtwr }}</uni-td>
									<uni-td align="center">{{ a.quantityYb }}</uni-td>
								</uni-tr>
							</uni-table>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="lastbottom" style="border-top: solid 1px #e5e5e5;">
			<view style="width: 50%;height: 80upx;line-height: 80upx;text-align: center;border-right: solid 1px #e5e5e5;font-size: 28upx;color: black;" @click="inputBack(item)">拒绝</view>
			<view style="width: 50%;height: 80upx;line-height: 80upx;text-align: center;color: rgb(87, 133, 170);font-size: 28upx;" @click="inputPass(item)">同意</view>
		</view>
		<view>
			<uni-popup ref="inputPass" type="dialog">
				<uni-popup-dialog ref="passClose"  mode="input" title="审批通过" :value="comment"
					placeholder="审批意见" @confirm="passTask()"></uni-popup-dialog>
			</uni-popup>
		</view>
		<view>
			<uni-popup ref="inputBack" type="dialog">
				<uni-popup-dialog ref="backClose"  mode="input" title="审批驳回" :value="comment"
					placeholder="审批意见" @confirm="backTask()"></uni-popup-dialog>
			</uni-popup>
		</view>
		

	</view>
</template>

<script>
	import tableData from '@/api/tableData.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		computed: {
			...mapState(['companyCode'])
		},
		data() {
			return {
				dateList:'全部',
				workList: '进行中',
				text: '暂无数据',
				title: '下拉刷新 + 加载更多',
				data: [],
				listData: [],
				salesItem:[],
				vbeln:'',
				kunnrName:'',
				mwskz:'',
				brand:'',
				vbakId:'',
				comment:'',
				wxDescription:'',
				id:'',
				procInstId:'',
				routingDescription:'',
				pageNo: 0,
				endFlag: false,
				filter: "",
				loadMoreText: "加载中...",
			};
		},

		onShow() {
			this.loadMoreText = "加载更多";
		},
		onLoad(e) {
			let todoInfo = JSON.parse(decodeURIComponent(e.info));
			this.vbeln = todoInfo.vbeln
			this.id = todoInfo.id
			this.procInstId = todoInfo.procInstId
			console.log(this.vbeln)
			this.initData();
		},
		mounted(){
		},
		onUnload() {
			this.max = 0;
			// this.data = [],
			this.listData = [];
		},
		onReachBottom() {
			if (this.endFlag == true) {
				this.loadMoreText = "已显示全部数据"
				uni.showToast({
					icon: 'none',
					title: this.loadMoreText
				});
				return;
			}
			setTimeout(() => {
				this.listData = []
				this.getList()
			}, 300);
		},
		onPullDownRefresh() {
			
			uni.stopPullDownRefresh();
		},
		methods: {
			
			initData() {
				setTimeout(() => {
					this.getList();
					uni.stopPullDownRefresh();
				}, 300);
			},
			inputPass(e) {
				this.$refs.inputPass.open()
			},
			inputBack() {
				this.$refs.inputBack.open()
			},
           //产品列表
			getList() {
				this.listData=[]
				let url = '/dcloud/salesDocument/salesDocument/salesOrderList'
				this.pageNo+=1
				this.$http.get(url, {
						params: {
						'vbeln':this.vbeln,
					}
				}).then(res => {
					if (res.data.success) {
						this.listData=res.data.result.records;
						this.vbeln = this.listData[0].vbeln
						this.kunnrName = this.listData[0].kunnrName
						this.mwskz = this.listData[0].mwskz
						this.brand = this.listData[0].brand
						this.wxDescription = this.listData[0].wxDescription
						this.routingDescription = this.listData[0].routingDescription
						this.vbakId = this.listData[0].vbakId
						this.getsalesTable()
					}
				}).catch(err => {
					console.log(err);
				});
			},
			
			getsalesTable() {
				this.salesItem=[]
				let url = '/dcloud/salesDocument/salesDocument/querySalesDocumentItemByMainId'
				this.pageNo+=1
				this.$http.get(url, {
						params: {
						'id':this.vbakId,
					}
				}).then(res => {
					if (res.data.success) {
						this.salesItem=res.data.result;
						this.salesItem.forEach(res => {
							res.sizeItem = JSON.parse(res.sizesJson);
						})
						if (this.salesItem.length <100) {
							this.endFlag = true;
							this.loadMoreText = "已显示全部数据"
						}
					}
				}).catch(err => {
					console.log(err);
				});
			},
			
			passTask(val){
				let url = '/dcloud/actTask/pass'+'?' + 'id='+this.id + '&'+ 'procInstId=' + this.procInstId +'&'+ 'type=0' +'&'+ 'sendMessage=true' + '&' + 'comment=' + val 
				this.$http.post(url).then(res => {
					if (res.data.success) {
						uni.navigateTo({
							url: '/pages/mcloud/todoManage'
						});
					}else{
						this.$tip.error(res.data.message)
					}
				})
				this.$refs.passClose.close()
			},
			backTask(val){
				let url = '/dcloud/actTask/back'+'?' + 'id='+this.id + '&'+ 'procInstId=' + this.procInstId +'&'+ 'type=1' +'&'+ 'sendMessage=true'+ '&' + 'comment=' + val
				this.$http.post(url).then(res => {
					if (res.data.success) {
						uni.navigateTo({
							url: '/pages/mcloud/todoManage'
						});
					}else{
						this.$tip.error(res.data.message)
					}
				})
				this.$refs.backClose.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-select {
		font-size: 14px;
		border: 0px solid #dd524d;
		box-sizing: border-box;
		border-radius: 0px;
		padding: 0 5px;
		padding-left: 10px;
		position: relative;
		display: flex;
		-webkit-user-select: none;
		user-select: none;
		flex-direction: row;
		align-items: center;
		/*    border-bottom: solid 1px #e5e5e5; */
		border-left: solid 1px #e5e5e5;
		width: 100%;
		flex: 1;
		height: 50upx;
	}

	::v-deep .uni-stat__actived {
		width: 150rpx;
		flex: 1;
	}

	page {
		background: #FFFFFF;
		width: 750upx;
		overflow-x: hidden;
	}
	.title{
		height: 60upx;
		display: flex;
		padding: 6upx 20upx 0 20upx;
		justify-content: space-between;
		background: #FFFFFF;
		font-size: 30upx;
		color: #000;
	}

	.bg-grey {
		background-color: rgb(234, 231, 231);
		padding: 2upx 20upx;

		.time-flex {
			display: flex;
			flex-wrap: wrap;

			.time-flex-item {
				width: 50%;
				text-align: center;
				height: 100upx;
				padding: 10upx 30upx;

				.time-flex-item-padding {
					background: #FFFFFF;
					height: 80upx;
					color: black;
					border-radius: 14upx;
					line-height: 80upx;
				}
				.time-flex-item-padding:active {
						background-color: #f5f5f5;
					}
			}
		}


		.conf-list {
			margin-top: -10upx;

			.conf-list-item {
				background: #FFFFFF;
				color: black;
				border-radius: 20upx;

				.conf-list-card {
					
					border-radius: 20upx;
					margin-top: 20upx;

					.conf-list-content {
						height: 60upx;
						padding: 0 20upx;
						font-size: 26upx;
					}

					.conf-list-content1 {
						height: 80upx;
						padding: 0 20upx;
						font-size: 26upx;
						display: flex;
						justify-content: space-between;
						view{
							font-size: 26upx;
						}
					}
				}
			}
		}
	}
	
	.uni-table {
		color: #000;
		font-size: 26upx
	}


	.header {
		display: flex;
		flex-direction: row;
		padding: 10px 15px;
		align-items: center;
		/* background-color: #b6bbc3; */
		background-image: linear-gradient(#34A4DF, #34A4DF, #2bace7);
	}


	.icon {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 10px;
	}

	.lastbottom {
		width:100%;
		height: 80upx;
		display: flex;
		background-color: #FFFFFF;
		justify-content: space-between;
		view{
			font-size: 26upx;	
		}
		position: fixed;
		bottom: 0
	}

</style>
